<template>
  <el-dialog title="" width="40%" :visible.sync="dialogTableVisible" :append-to-body='true'>
    <div class="alert">
        <div class="alert-box">
            <i class="el-icon-close close" @click="cancel" style="color: white;"></i>
	    <div class="bt">课程列表</div>
            <div class="left">
                <div class="search">
                    <!-- <el-input class="input" v-model="name"></el-input>
                    <el-button type="info" class="btn" @click="search">搜索</el-button> -->
                    <el-button type="success" class="add btn" @click="submit">确定</el-button>
                </div>
                <!-- <el-checkbox  v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> -->
                 <!-- <div style="margin: 15px 0;">{{checkedCities}}</div> -->
                 <el-checkbox-group v-for class="check" v-model="checkedCities" @change="checkSelect">
                   <el-checkbox v-for="city in dataList"  :label="city"  type="selection">{{city.kcmc}}</el-checkbox>
                 </el-checkbox-group>
                 <el-checkbox-group class="check" v-model="checkedCities" @change="checkSelect">
                    <el-checkbox v-for="city in dataList2"  :label="city"  type="selection">{{city.kcmc}}</el-checkbox>
                 </el-checkbox-group>
                 <el-checkbox-group class="check" v-model="checkedCities" @change="checkSelect">
                     <el-checkbox v-for="city in dataList3"  :label="city"  type="selection">{{city.kcmc}}</el-checkbox>
                 </el-checkbox-group>
                 <el-checkbox-group class="check" v-model="checkedCities" @change="checkSelect">
                      <el-checkbox v-for="city in dataList4"  :label="city"  type="selection">{{city.kcmc}}</el-checkbox>
                 </el-checkbox-group>
                 <el-checkbox-group class="check" v-model="checkedCities" @change="checkSelect">
                       <el-checkbox v-for="city in dataList5"  :label="city"  type="selection">{{city.kcmc}}</el-checkbox>
                 </el-checkbox-group>
            <!-- 动画加载 -->
            <LoadingComponent v-show="isLoading"></LoadingComponent>
        </div>
    </div>
    </div>
    </el-dialog>
</template>

<script>

    import { mapState } from 'vuex'
    import LoadingComponent from 'components/loading'
    import qs from 'qs'
    export default {
        components: {
            LoadingComponent
        },
        data () {
            return {
                name:'',
                multipleList: [],
                dataList: [],  //表格数据
                dataList2: [],  //表格数据
                dataList3: [],  //表格数据
                dataList4: [],  //表格数据
                dataList5: [],  //表格数据
                chooseList: ['aa','bb'],
                checkedCities:[],
                checkAll:false,
                dialogTableVisible:true,
                /*
                    prop :  接口参数名
                    label : 接口中文名
                    hide : 是否隐藏这一列
                    align : 这一列对齐顺序 ： left,right,center
                    headerAlign : 这一列表头对齐方式 ： left,right,center
                */


                /*动画加载*/
                isLoading: true,//动画加载
                searchLoading: false,//搜索按钮触发按钮动画

                /*模糊搜索条件*/
                inputmc:'' , //  班级名称,

                /*分页属性设置*/
                layout: 'total, sizes, prev, pager, next, jumper',//组件布局
                pageindex: 1,//当前分页页码
                pagesizes: [12, 24, 36, 72],//显示个数的选择器选项
                pagesize: 12,//每页显示条目数
                total: 0,//总条数

                dropDownData:'', //
                portTitleList: [

                    {
                        prop:'xxid',
                        label:'学校id',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'110',
                        minWidth:'',
                        headerAlign:'center',
                        formatter: function(row,column) {}
                    },
                    {
                        prop:'xxmc',
                        label:'学校名称',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'110',
                        minWidth:'',
                        headerAlign:'center',
                        formatter: function(row,column) {}
                    },
                    {
                        prop:'id',
                        label:'课程id',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'110',
                        minWidth:'',
                        headerAlign:'center',
                        formatter: function(row,column) {}
                    },
                    {
                        prop:'kcmc',
                        label:'课程名称',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'110',
                        minWidth:'',
                        headerAlign:'center',
                        formatter: function(row,column) {}
                    }
                ]
            }
        },
        created () {

            //加载页面时调用
            this.search();//分页获取默认数据

            this.isLoading = true;//动画开始

        },
        mounted () {

        },
        methods: {
          handleCheckAllChange(event) {
            this.checkedCities = event.target.checked
          },
          handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.dataList.length;
           this.$message.warning(this.checkAll)
          },
            tableRowClassName (row, index) {//隔行变色颜色设置
                /*if ( index%4 == 0) {
                    return "table-cell-green";
                }else if( index%4 == 1 ){
                    return "table-cell-yellow";
                }else if( index%4 == 2 ){
                    return "table-cell-red";
                }else{
                    return "table-cell-blue"
                }*/
            },
            tableCellControl (scope) {//表格单元格控制CSS样式
                /*if (scope.row.id == 112 && scope.column.property == "iname") {
                    return {
                        color:"red",
                    }
                }else{
                    return {
                        color:"green",
                    }
                }*/
            },
            // selectable (row, index) {
            //     console.log(row,index)
            //     return true
            // },

						search () {//查询搜索触发事件
								var logininfo = JSON.parse(localStorage.logininfo) ;//获取学校  用户id
                var params3 = qs.stringify({
    							yhid: logininfo.id,
    							xxid:logininfo.xxid
    						});
								this.searchLoading = true;
								this.axios.post(this.$store.state.api + 'wpfx/hdjc',params3)
                .then( res => {
										console.log('111',res)
										this.isLoading = false;//动画结束
										let data = res.data.data;
										let list = data.list1;
										let list2 = data.list2;
										let list3 = data.list3;
										let list4 = data.list4;
										let list5 = data.list5;
										this.total = data.totalPage;
										this.dataList = list;
										this.dataList2 = list2;
										this.dataList3 = list3;
										this.dataList4 = list4;
										this.dataList5 = list5;
										this.searchLoading = false;
								}).catch( res => {
										console.log(res)
										this.searchLoading = false;
								})
						},

						submit () {
                let arr = [];
                this.multipleList.forEach(function(v, i){
                    // console.log(v)
                    arr.push({
                        id:v.id,
                        type:'课程',
                        mc:v.kcmc,
                        dw: '次数',
                        zk: '100',
                        number:v.ks,
                        jg:v.jg,
                        jcjg:v.jcjg
                    })
                })
                this.multipleList = arr;
                this.$emit('close',{type:'course',cancel:false,data:this.multipleList})
                console.log(this.multipleList)
            },

            // del (obj) {
            //     if (obj) {
            //         // console.log(obj)
            //         this.$refs.multipleTable.toggleRowSelection(obj,false);
            //     }else{
            //         this.$refs.multipleTable.clearSelection();
            //         this.multipleList = [];
            //     }
            //
            // },

            // handleSizeChange (val) {//每页显示条数触发事件
            //     this.pagesize = val;
            //     this.pageindex = 1;
            //     this.search();
            // },
            //
            // handleCurrentChange (val) {//分页触发事件
            //     this.search();
            // },
            checkSelect () {//点击单选select触发事件
                // console.log(this.checkedCities)
                this.multipleList = this.checkedCities;
                console.log(this.multipleList)
                // this.multipleList.push({
                //     id:
                // })
                // let strID = [];
                // selection.forEach(function(v,i){
                //     strID.push(v.id)
                // })
                // this.multipleDelNum = strID.join(",");
            },
            // checkall (selection) {//点击全选select触发事件
            //     // console.log(selection)
            //     this.multipleList = selection;
            //     console.log(this.multipleList)
            //     // let strID = [];
            //
            //     // selection.forEach(function(v,i){
            //     //     strID.push(v.id)
            //     // })
            //     // // console.log(strID.join(","))
            //     // this.multipleDelNum = strID.join(",");
            //     // // console.log(strID)
            // },

            cancel () {
               this.$emit('close',{type:'course',cancel:true})
            },

            /* 组件的弹框  */
            componentsShow (type,data) { //显示组件
                console.log(type,data)
                for ( let i in this.componentList ) {
                    if (type == this.componentList[i].type) {

                        this.componentList[i].toggle = true;
                        this.componentList[i].params = data;

                        if (this.componentList[i].data.type == 'single') {
                            this.componentList[i].data.index = data.row.id

                        }else if(this.componentList[i].data.type == 'multiple'){
                            this.componentList[i].data.index = this.multipleDelNum;

                        }else{
                            return;
                        }
                        return;
                    }
                }
            },
            componentsHide (setting) { //关闭组件
                for ( let i in this.componentList ) {
                    if (setting.type == this.componentList[i].type) {
                        this.componentList[i].toggle = false;

                        if (!setting.cancel) {
                           this.search();
                        }
                        return;
                    }
                }
            }

        },
        computed: {
            ...mapState([
                'api'//域名
            ])
        }
    }
</script>

<style lang="less" scoped>

    .alert-box {
        text-align: left;
        // width: 400px;
        // min-width:875px;
    }
    .close{
      z-index: 10;
    }
		.check{
			width: 60px;
			height: 100%;
			float: left;
			margin-top: 20px;
			margin-left: 0px;
			margin-right: 5%;
			text-align: center;
		}
		.el-checkbox{
			width: 60px;
			height: 100%;
			float: left;
			margin-top: 10px;
			margin-left: 0px;
			text-align: center;
		}
    .bt{
			width: 100%;
			height: 50px;
			margin: 0 auto;
      position: absolute;
      top: 0;
      left: 0;
			background: #50BFFF;
			color:white;
			text-align:left;
			line-height: 50px;
			font-size: 17px;
			padding-left: 15px;
		}
    .btn {
        margin-top: 50px;
        width:80px;
        margin-left:5px;
        padding:7px 15px;
    }




</style>
